import React, { useState } from 'react';
import './TopBar.css';
import localIcon from './icons/local.png';
import onlineIcon from './icons/online.png';
import searchIcon from './icons/search.png';

function TopBar() {
    const [activeTab, setActiveTab] = useState('local');

    return (
        <div className="top-bar">
            <button
                className={activeTab === 'local' ? 'active' : ''}
                onClick={() => setActiveTab('local')}
            >
                <img src={localIcon} alt="Local" />
                本地
            </button>
            <button
                className={activeTab === 'online' ? 'active' : ''}
                onClick={() => setActiveTab('online')}
            >
                <img src={onlineIcon} alt="Online" />
                在线
            </button>
            <button
                className={activeTab === 'search' ? 'active' : ''}
                onClick={() => setActiveTab('search')}
            >
                <img src={searchIcon} alt="Search" />
                搜索
            </button>
        </div>
    );
}

export default TopBar;
